<template>
	<view class="coining">
		<view
			class="status_bar_h"
			:style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper>
			<!-- <image
				style="width: 100%; height: 400rpx"
				mode="aspectFill"
				:src="src"></image> -->
		</view>
		<view class="main">
			<view class="title">
				<view class="store">{{ view.store }}</view>
				<view class="info">
					<text>歡迎您：</text><text>{{ view.user.mobile }} | </text
					><text>{{ view.user.level === 0 ? '普通會員' : '' }} | </text
					><text @click="logout">退出</text>
				</view>
			</view>
			<view class="coining">
				<view class="coining_box">
					<view class="coining_title">投幣已完成</view>
					<view class="coining_content">
						<up-image
							:show-loading="true"
							mode="aspectFit"
							shape="circle"
							bgColor="#c8c9cc"
							:src="coiningImg"
							width="300rpx"
							height="300rpx"></up-image>
					</view>
				</view>
			</view>
			<view class="notice">
				<u-notice-bar
					bgColor="#fff"
					color="#39B19D"
					:text="text1"></u-notice-bar>
			</view>
		</view>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/utils/baseURL.js';
export default {
	components: {},
	data() {
		return {
			src: [],
			text1: '可找零錢數量50元*3',
			roomImg: '',
			coiningImg: '/static/images/coining.png',
			baseURL,
			isChecked: false,
			disabled: false,
			isCouponShow: false,
			isPayShow: false,
			isErrorTipShow: false,
			changeText: '獲取驗證碼',
			view: {
				ticket: {},
				user: {},
				store: '',
				coupon: '',
				count: 0,
				couponMoney: 0,
			},
			form: {},
			statusBarHeight: 0, // 顶部状态栏高度
			bthHeight: 0, // 底部按钮高度
			list: [],
			options: {
				coupon: [],
			},
			scrollTop: 0,
			old: {
				scrollTop: 0,
			},
			page: 1,
			timer: null,
		};
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		// const screenTop = uni.getSystemInfoSync().safeArea.top;
		// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
		this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
		// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
		// console.log('this.bthHeight', this.bthHeight);
		// console.log('screenTop', screenTop);
		// console.log('screenBot', screenBot);
		const userOptions = JSON.parse(uni.getStorageSync('userOptions'));
		const equipmentOptions = JSON.parse(uni.getStorageSync('equipmentOptions'));
		const { user } = useStore();
		this.form = { ...user.ticket, coupon: '' };
		this.view = {
			ticket: user.ticket,
			user: userOptions,
			store: equipmentOptions.name,
			coupon: '',
		};
		this.setSwiperImg();
		this.countdown();
		console.log(user);
		// const token = JSON.parse(uni.getStorageSync('token'))
		// 	? JSON.parse(uni.getStorageSync('token'))
		// 	: ''; // 1 店家 2商家
		// if (!token) {
		// 	uni.navigateTo({
		// 		url: '/pages/login/login',
		// 	});
		// } else {
		// }
	},
	onUnload() {
		clearTimeout(this.timer);
	},
	methods: {
		setSwiperImg() {
			const equipmentOptions = JSON.parse(
				uni.getStorageSync('equipmentOptions')
			);
			// console.log('equipmentOptions', equipmentOptions.imagejh);
			const _src = equipmentOptions.imagejh
				? equipmentOptions.imagejh.split(',')
				: [];
			if (_src.length > 1) {
				this.src = _src.map(item => baseURL + item);
			} else if (_src.length === 1) {
				this.src = [baseURL + _src[0]];
			}
		},
		countdown() {
			this.timer = setInterval(() => {
				// uni.navigateTo({
				// 	url: '/pages/index/index',
				// });
			}, 1000 * 60 * 10);
		},
		clearCountdown() {
			clearInterval(this.timer);
			this.countdown();
		},
		slected(data) {
			this.view.coupon = data.title;

			this.view.couponMoney = data.money * 1;
			this.view.ticket.money = this.view.ticket.money - data.money;
			this.form.money = this.view.ticket.money - data.money;
			console.log('this.view.couponMoney', this.view.couponMoney);
			console.log('data909sd0f98sd0f9', data);
		},
		submit() {
			this.isPayShow = true;
			// if (this.isChecked) {
			// 	if (this.checkForm()) {
			// 		const params = {
			// 			user_name: this.form.user_name,
			// 			user_pass: this.form.user_pass,
			// 		};
			// 		login(params)
			// 			.then(res => {
			// 				uni.showToast({
			// 					title: '成功',
			// 					duration: 1000,
			// 				});
			// 			})
			// 			.catch(err => {
			// 				uni.showModal({
			// 					title: '系統提示',
			// 					content: `登录失败，原因${err}`,
			// 				});
			// 			});
			// 	} else {
			// 		uni.showModal({
			// 			title: '系統提示',
			// 			content: '請檢查是否填寫',
			// 		});
			// 	}
			// } else {
			// 	uni.showToast({
			// 		title: '请勾选协议',
			// 		duration: 1000,
			// 	});
			// }
		},
		checkForm() {
			const { user_name, user_pass } = this.form;
			return user_name && user_pass ? true : false;
		},
		getCouponList() {
			const equipmentOptions = JSON.parse(
				uni.getStorageSync('equipmentOptions')
			);
			getCouponList({
				type: 1,
				page: this.page,
				store_id: equipmentOptions.store_id,
			}).then(res => {
				this.options.coupon = res;
				console.log('view', res);
			});
		},
		getRoomList(data) {
			const id = data.room_type;
			if (id !== 0) {
				getRoomList({}).then(res => {
					const arr = res.find(item => item.id === id);
					console.log('arr', arr);
					this.view.ticket.room_type_name = arr[0].name;
				});
			} else {
				this.view.ticket.room_type_name = '全场通用';
			}
		},
		close() {
			this.isCouponShow = false;
		},
		jump(data) {
			let url = '';
			switch (data) {
				case 'register':
					url = '/pages/register/register';
					break;
				case 'codeLogin':
					url = '/pages/menu/menu';
					break;
				case 'scanCode':
					url = '/pages/scanCode/scanCode';
					break;
				case 'pay':
					url = '/pages/pay/ticket';
					break;
				case 'logout':
					url = '/pages/index/index';
					break;
				default:
			}
			uni.navigateTo({ url });
		},
		logout() {
			uni.removeStorageSync('userOptions');
			this.jump('logout');
		},
		handShopping() {
			console.log('购买');
		},
	},
};
</script>

<style lang="scss" scoped>
.coining {
	height: 100%;
	color: $uni-color-green;
	// .img_box {
	// 	// padding: 40rpx 40rpx 0;
	// }
	.main {
		.title {
			padding: 20rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
		}
		.coining {
			&_box {
				background-color: $uni-color-white;
				.coining_title {
					padding: 20rpx;
					text-align: center;
					font-size: 50rpx;
				}
				.coining_content {
					padding: 0 0 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.notice {
			padding-top: 20rpx;
			height: 100rpx;
		}
	}
}
</style>
